<template>
	<view class="flex-colum-start" @click="btnClick">

		<image :src="imgSrc" mode="aspectFill" class="img"></image>

		<view class="flex-colum-center-align-start" style="width: 100%;">
			<span style="font-size: 28rpx;">{{productName}}</span>
			<view class="flex-row-between" v-if="isHasInviteCode">
				<span style="color:#FF4785;font-size: 28rpx;margin-right: 20rpx;">¥ {{price}}</span>
				<span style="color:#9CA3AF;font-size: 28rpx;text-decoration: line-through;">¥ {{orignPrice}}</span>
			</view>
			<view class="flex-row-between" v-else>
				<span style="color:#FF4785;font-size: 28rpx;">¥ {{orignPrice}}</span>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex';
	export default {
		props: {
			productId: {
				type: String,
				default: ''
			},
			productName: {
				type: String,
				default: '蔬菜'
			},
			orignPrice: {
				type: String,
				default: ''
			},
			price: {
				type: Number,
				default: 8888
			},
			imgSrc: {
				type: String,
				default: require("../../static/img/product/nvzhuang.jpg"),
			}
		},

		data() {
			return {
				selectStatus: false
			};
		},
		computed: {

			isHasInviteCode: function() {
				var invite_code = uni.getStorageSync('invite_code');
				return invite_code ? true : false;
			}

		},

		methods: {
			btnClick() {
				let that = this;
				console.log(`商品被点击，${this.productId}`)
				that.$emit('itemClicked', this.productId);

			}
		},
		watch: {
			isSelect(newValue) {
				console.log('newValue', newValue)
				this.selectStatus = newValue;
			}
		},
	}
</script>

<style lang="scss">
	.img {
		width: 100%;
		height: 320rpx;
	}
</style>